<style>
    table,
    th,
    td {
        border: 1px solid grey;
    }

    /* table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;

} */

    caption {
        font-style: italic;
        text-align: right;
        padding: 7px;
        margin: 5px;
        background: rgb(11, 173, 223);
        color: #fff;
    }
</style>

<table>
    <caption>Main Table</caption>
    <colgroup>
        <col span="3" style="background: khaki">
        <col style="background: #ff8040">
    </colgroup>
    <thead>
        <tr>
            <th headers="one">th head 1</th>
            <th headers="two">th head 2</th>
            <th headers="three">th head 3</th>
            <th headers="fore">th head 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3">td data 1</td>
            <td>td data 2</td>
            <td>td data 3</td>
            <td>td data 4</td>
        </tr>

            <td>td data 2</td>
            <td>td data 3</td>
            <td>td data 4</td>
        </tr>
        <tr>

            <td>td data 2</td>
            <td>td data 3</td>
            <td>td data 4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">td data 1</td>
            <td>td data 2</td>
        </tr>
    </tfoot>
</table>

<table class="nesting">
    <tr>
      <th>ячейка заголовка таблицы</th>
      <th>ячейка заголовка таблицы</th>
    </tr>
    <tr>
      <td>ячейка таблицы</td>
      <td>
        <table>
          <tr>
            <th>ячейка заголовка вложенной таблицы</th>
          </tr>
          <tr>
            <td>ячейка вложенной таблицы</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>